<template>
    <div class="box">
        <div class="header">首页</div>

        <div class="content">
            <!-- 1. 商品轮播图 -->
            <van-swipe
                class="my-swipe"
                :autoplay="5000"
                indicator-color="white"
            >
                <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                    <van-image :src="item.img" />
                </van-swipe-item>
            </van-swipe>

            <!-- 2. 宫格列表 -->
            <van-grid :column-num="5" :border="false">
                <van-grid-item
                    v-for="item in navList"
                    :key="item.navid"
                    :icon="item.imgurl"
                    :text="item.title"
                />
            </van-grid>

            <!-- 3. 商品列表 -->
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <ProList :list="proList" />
            </van-list>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getBannerList, getNavList, getProList } from "@/api/home";
import { onMounted, ref } from "vue";
import type { Ref } from "vue";
import ProList from "@/components/prolist.vue";

// ============================上拉加载新数据=====================================
const loading = ref(false);
const finished = ref(false);
const current = ref(1); // 存储商品的当前页
async function onLoad() {
    // 请求新数据
    const { data } = await getProList({ count: current.value });

    // 如果本次请求没有请求回来新数据, 那么结束上拉加载的功能
    // if (data.data.length === 0) {
    if (!data.data.length) {
        return finished.value = true
    }

    proList.value = [...proList.value, ...data.data];

    // 请求完毕新数据, 将加载中的状态关闭
    loading.value = false;

    // 请求完毕一次后, 更改当前的页码, 下一次请求的时候 会请求新的数据
    current.value++;
}
// ============================上拉加载新数据=====================================

// 存储轮播图数据
interface IBannerList {
    alt: string;
    bannerid: string;
    flag: boolean;
    img: string;
    link: string;
}
const bannerList: Ref<IBannerList[]> = ref([]);

// 存储宫格列表数据
interface INavList {
    navid: number;
    title: string;
    imgurl: string;
}
const navList: Ref<INavList[]> = ref([]);

// 存储商品列表数据
interface IProList {
    banners: string[];
    proid: string;
    category: string;
    brand: string;
    proname: string;
    originprice: number;
    sales: number;
    stock: number;
    desc: string;
    issale: number;
    isrecommend: number;
    discount: number;
    isseckill: number;
    img1: string;
    img2: string;
    img3: string;
    img4: string;
}
const proList: Ref<IProList[]> = ref([]);

onMounted(async () => {
    // 获取轮播图数据
    const { data } = await getBannerList();
    bannerList.value = data.data;

    // 获取宫格列表数据
    navList.value = getNavList();

    // 因为 我们 van-list 组件中的上拉加载功能会在页面刚打开的时候执行一次, 所以我们将 请求换一个地方书写
    // 获取商品列表
    // proList.value = (await getProList({})).data.data;
});
</script>

<style>
.van-swipe {
    height: 1.6rem;
    .van-image {
        width: 100%;
        height: 100%;
    }
}
</style>
